<template>
    <div>
        <h3>新增电影</h3>
        <p>电影名称：<input type="text" v-model.lazy="addMovie.name"></p>
        <p>电影类型：
            <template v-for="typeds in typeData" :key="typeds._id">
                <input type="checkbox" :value="typeds.name" v-show="typeds.name" v-model="addtypes"
                    @change="addMovie.types = addtypes">{{ typeds.name }}
            </template>
        </p>
        <p>制片国家：<select v-model="addMovie.country">
                <option v-for="land in landData" :key="land._id" :value="land.name">{{ land.name }}</option>
            </select></p>
        <p>上映年份：<input type="text" v-model.lazy="addMovie.year"></p>
        <p>播放时长：<input type="text" v-model.lazy="addMovie.duration"></p>
        <p>是否热映：<input type="radio" value="1" name="hot" v-model="addMovie.hot">是<input type="radio" value="0"
                name="hot" v-model="addMovie.hot">否 </p>
        <button @click="add">确认新增</button>
        <button @click="edd">确认修改</button>
    </div>
    <div>
        <h3>电影列表</h3>
        <input type="text" placeholder="请输入电影名称" v-model.lazy="choose.name">
        <select v-model="choose.country">
            <option v-for="land in landData" :key="land._id" :value="land.name">{{ land.name }}</option>
        </select>
        <select v-model="choose.types">
            <option value="" v-for="typed in typeData" :key="typed._id">{{ typed.name }}</option>
        </select>
        <button v-on:click="fchoose={...choose}">搜索</button>

        <table border="1">
            <thead>
                <tr>
                    <td>编号</td>
                    <td>电影名称</td>
                    <td>电影类型</td>
                    <td>制片国家</td>
                    <td>上映年份</td>
                    <td>时长</td>
                    <td>热映</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(movieitem, index) in filterMovie" :key="movieitem._id">
                    <td>{{ movieitem._id }}</td>
                    <td>{{ movieitem.name }}</td>
                    <td>{{ movieitem.types.join("/") }}</td>
                    <td>{{ movieitem.country }}</td>
                    <td>{{ movieitem.year }}</td>
                    <td>{{ movieitem.duration }}</td>
                    <td>
                        <!-- {{ movieitem.hot?'是':'否' }} -->
                        <span v-if="movieitem.hot">是</span>
                        <span v-else>否</span>
                    </td>
                    <td>
                        <button @click="edit(movieitem)">修改</button>
                        <button @click="movieData.splice(index, 1)">删除</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup>
import { reactive, computed, ref } from 'vue';

const choose = ref({
    "name": '',
    "country": '',
    "types": ''
});
const fchoose = ref({
    "name": '',
    "country": '',
    "types": ''
});
const addMovie = ref({});
const addtypes = ref([])


const landData = reactive(
    [
        { "_id": '', "name": '' },
        {
            "_id": "682d9655fa09000092007cb3",
            "name": "中国大陆"
        },
        {
            "_id": "682f3a9047bd398e5f05fd1d",
            "name": "中国香港"
        },
        {
            "_id": "682fdada47bd398e5f05fd1f",
            "name": "中国台湾"
        },
        {
            "_id": "68303b6647bd398e5f05fd41",
            "name": "美国"
        },
        {
            "_id": "682da00efa09000092007cb5",
            "name": "法国"
        },
        {
            "_id": "6830403b47bd398e5f05fd42",
            "name": "韩国"
        },
        {
            "_id": "682d9d6efa09000092007cb4",
            "name": "日本"
        }
    ])

const typeData = reactive([
    { "_id": '', "name": '' },
    {
        "_id": "66383656659a454f4604aed3",
        "name": "喜剧"
    },
    {
        "_id": "66383669659a454f4604aed4",
        "name": "爱情"
    },
    {
        "_id": "6638366f659a454f4604aed5",
        "name": "动作"
    },
    {
        "_id": "66383673659a454f4604aed6",
        "name": "科幻"
    },
    {
        "_id": "6638369e659a454f4604aede",
        "name": "奇幻"
    },
    {
        "_id": "6638367b659a454f4604aed7",
        "name": "动画"
    },
    {
        "_id": "66383681659a454f4604aed8",
        "name": "悬疑"
    },
    {
        "_id": "66383689659a454f4604aed9",
        "name": "犯罪"
    },
    {
        "_id": "66383692659a454f4604aedb",
        "name": "冒险"
    },
    {
        "_id": "663836a1659a454f4604aedf",
        "name": "恐怖"
    },
    {
        "_id": "663836b0659a454f4604aee1",
        "name": "传记"
    },
    {
        "_id": "682f32c447bd398e5f05fd14",
        "name": "剧情"
    }
])

const movieData = ref([
    {
        "_id": "682d9da7573f2ec0eb01fb5b",
        "name": "攻壳机动队",
        "duration": "83",
        "hot": 1,
        "types": [
            "动作",
            "科幻",
            "动画"
        ],
        "country": "日本",
        "year": "1995",
    },
    {
        "_id": "682da14ba9d2e7026f9c3016",
        "name": "幽灵公主",
        "score": "8.9",
        "duration": "134",
        "hot": 0,
        "types": [
            "动画",
            "奇幻",
            "冒险"
        ],
        "country": "日本",
        "year": "1997",
    },
    {
        "_id": "682da1d6a9d2e7026f9c301e",
        "name": "情书",
        "score": "8.9",
        "duration": "117",
        "hot": 1,
        "types": ["爱情"],
        "country": "日本",
        "year": "1995",
    },
    {
        "_id": "682ef55afa09000092007cbe",
        "name": "诡才之道",
        "duration": "112",
        "hot": 1,
        "types": [
            "喜剧",
            "恐怖"
        ],
        "country": '中国台湾',
        "year": "2024",
    },
    {
        "_id": "6830407c5b05254ad43ad998",
        "name": "终极对弈",
        "score": "7.3",
        "country": '韩国',
        "duration": "116",
        "hot": 0,
        "types": [
            "剧情", "传记"
        ],
        "year": "2025",
    },
    {
        "_id": "682f31885631163b8565d71f",
        "name": "大风杀",
        "score": "7.0",
        "country": '中国大陆',
        "duration": "131",
        "hot": 1,
        "types": [
            "悬疑",
            "犯罪",
            "剧情"
        ],
        "year": "2025",
    }
])

function add() {
    addMovie.value._id = Date.now();
    movieData.value.push(addMovie.value);
    addMovie.value = '';
    addtypes.value = '';
}

function edd() {
    console.log(addMovie.value);
    movieData.value = movieData.value.map(item => {
        if (item._id == addMovie.value._id) {
            return addMovie.value;
        }
        return item;
    })
    addMovie.value = '';
    addtypes.value = '';
}
function edit(data) {
    addMovie.value = { ...data };
    addtypes.value = addMovie.value.types;
}

const filterMovie = computed(() => {
    return movieData.value.filter(item => {
        const result1 = (item.name.includes(fchoose.value.name));
        const result2 = fchoose.value.country ? (item.country == fchoose.value.country) : true;
        const result3 = fchoose.value.types ? (item.types.includes(fchoose.value.types)) : true;
        return result1 && result2 && result3;
    })
})


</script>


<style scoped></style>